<template>
  <div class="diaryContent">
    <header>
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      <p>日记内容</p>
      <p>提交</p>
    </header>
    <main>
      <div class="write_title">
        <div class="write_input">
          <input
            type="text"
            maxlength="25"
            placeholder="为你的日记写一个响亮的标题吧"
            v-model="txt"
          />
          <span>{{ length }}/25</span>
        </div>
      </div>
      <div class="shoushu">
        <div class="shoushu_content">
          <van-icon name="calendar-o" />
          <p>手术当天</p>
        </div>
        <p>修改></p>
      </div>
      <div class="content">
        <p>内容</p>
        <div class="add_video">添加视频</div>
        <div class="add_img">添加图片</div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      txt: "",
    };
  },
  computed: {
    length() {
      return this.txt.length;
    },
  },
  //   watch: {
  //     txt(v) {
  //       console.log(v);
  //     },
  //   },
};
</script>

<style lang="scss" scoped>
.diaryContent {
  font-size: 35px;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px;
    // background-color: red;s
    padding: 20px;
    border-bottom: 4px solid #ddd;
  }
  main {
    .write_title {
      width: 700px;
      height: 100px;
      margin: 20px;
      padding-top: 25px;
      border-bottom: 2px solid #ddd;

      .write_input {
        font-size: 26px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          width: 500px;
          height: 50px;
          border: none;
        }
      }
    }
    .shoushu {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30px;
      border-bottom: 2px solid #ddd;
      padding: 0 30px;
      .shoushu_content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        i {
          margin-right: 20px;
        }
      }
    }
    .content {
      width: 100%;
      p {
        padding: 30px 0 100px 30px;
      }
      .add_video {
        width: 200px;
        height: 200px;
        background-color: #ddd;
        float: left;
        margin: 0 30px 0 30px;
        border: 1px dotted rgb(138, 46, 46);
        border-radius: 15px;
      }
      .add_img {
        width: 200px;
        height: 200px;
        background-color: #ddd;
        float: left;
        border: 1px dotted rgb(138, 46, 46);
        border-radius: 15px;
      }
    }
  }
}
</style>